<template>
    <div class="echartsBox">
        <div class="lineChart">
            <div class="lineChartR">
                <div class="status">分控码分布情况</div>
                <div class="left">
                    <div class="leftBox">
                        <div id="mainLeft" style="width: 100%;height:100%;"></div>
                    </div>
                </div>
            </div>
            <div class="lineChartL">
                <div class="status">今日医院人员情况</div>
                <div id="main" style="width: 100%;height:4.3rem;"></div>
            </div>
        </div>
        <div class="tableBox">
            <div class="status">本院人员健康打卡情况分析</div>
            <div class="table-box">
                <el-table
                    :data="tableData"
                    class="table"
                    stripe
                    :border="false"
                    style="width: 100%">
                    <el-table-column label="今日打卡" align="center">
                        <el-table-column
                            prop="alreadyClockNum"
                            label="已打卡"
                            align="center"
                            min-width="100">
                        </el-table-column>
                        <el-table-column
                            prop="notClockNum"
                            label="未打卡"
                            align="center"
                            min-width="100">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="近14天打卡情况" align="center">
                        <el-table-column
                            prop="healthNum"
                            label="健康人数"
                            align="center"
                            min-width="100">
                        </el-table-column>
                        <el-table-column
                            prop="touchHubeiNum"
                            align="center"
                            label="接触过湖北等地的人数"
                            min-width="100">
                        </el-table-column>
                        <el-table-column
                            prop="touchPatientNum"
                            align="center"
                            label="接触过确诊、疑似病人的人数"
                            min-width="100">
                        </el-table-column>
                        <el-table-column
                            prop="touchPatientNum"
                            align="center"
                            label="邻近有确诊病人的人数"
                            min-width="100">
                        </el-table-column>
                        <el-table-column
                            prop="recordDate"
                            align="center"
                            label="日期"
                            min-width="100">
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    import tableExample from '../components/table'

    export default {
        name: '',
        data() {
            return {
                tableData: [],
                perAnalysis: '1',
                // perAnalysisCurrent: null,
                slotColumns: [],
                header: [],
                code: [],
                arriveNumList: [], // 到达
                notArriveNumList: [], // 未到达
                recordDateList: [],
                viewResize: null,
                chartList: {
                    mainLeft: null,
                    mainRight: null,
                    main: null
                }
            }
        },
        mounted() {
            let _this = this
            this.getPieData()
            this.getLineData()
            this.getRpPeopleClock()
            window.addEventListener('resize', function () {
                _this.viewResize = setTimeout(() => {
                    if (_this.chartList.mainLeft) _this.chartList.mainLeft.resize()
                    if (_this.chartList.main) _this.chartList.main.resize()
                }, 300)
            })
        },
        methods: {
            getPieData() {
                this.$http.get('/HealthCodeAnalyzeController/codeAnalyze').then(result => {
                    if (result.success) {
                        this.code = result.data
                        this.pieLeftMethods()
                    }
                })
            },
            getLineData() {
                this.$http.get('/HealthCodeAnalyzeController/getReportPeopleOrder').then(result => {
                    if (result.success) {
                        for (let i = 0; i < result.data.length; i++) {
                            this.arriveNumList.push(result.data[i].arriveNum)
                            this.recordDateList.push(result.data[i].recordTime)
                            this.notArriveNumList.push(result.data[i].notArriveNum)
                        }
                        this.lineMethods()
                    }
                })
            },
            pieLeftMethods() {
                this.chartList.mainLeft = this.$echarts.init(document.getElementById('mainLeft'))
                let option = {
                    title: {
                        text: '',
                        textAlign: 'left'
                    },
                    tooltip: {},
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        y: 'center',
                        data: ['红码', '黄码', '绿码']
                    },
                    series: [{
                        name: '',
                        type: 'pie',
                        data: [
                            {value: this.code[0].hospitalNum, name: '红码'},
                            {value: this.code[1].hospitalNum, name: '黄码'},
                            {value: this.code[2].hospitalNum, name: '绿码'}
                        ]
                    }],
                    color: ['#FB4D52', '#F8FD73', '#47CF61']
                }
                this.chartList.mainLeft.setOption(option)
            },

            lineMethods() {
                this.chartList.main = this.$echarts.init(document.getElementById('main'))
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line',
                            label: 'cross',
                            show: true
                        }
                    },
                    grid: {
                        left: '2%',
                        top: 80,
                        bottom: 20,
                        right: '3%',
                        containLabel: true
                    },
                    legend: {
                        data: ['到院人数', '未到院人数'],
                        align: 'left',
                        left: '2%',
                        top: 10,
                        icon: 'rect'
                    },
                    xAxis: {
                        show: true, // 横坐标显示与隐藏
                        data: this.recordDateList,
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#999'
                            }
                        }
                    },
                    yAxis: {
                        show: true, // 纵坐标显示与隐藏
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    series: [
                        {
                            name: '到院人数',
                            type: 'line',
                            smooth: true,
                            symbol: 'none',
                            areaStyle: {},
                            z: 2,
                            data: this.arriveNumList
                        },
                        {
                            name: '未到院人数',
                            type: 'line',
                            smooth: true,
                            symbol: 'none',
                            areaStyle: {},
                            z: 2,
                            data: this.notArriveNumList
                        }
                    ],
                    textStyle: {},
                    color: ['#6495F9', '#96F050']
                }
                this.chartList.main.setOption(option)
            },
            getRpPeopleClock() {
                this.$http.get('/reportPeopleClock/getRpPeooleClock').then(result => {
                    if (result.success) {
                        this.tableData = result.data
                    }
                })
            }
        },
        components: {
            tableExample
        }
    }
</script>

<style scoped lang="less">
    .hospital /deep/ .el-radio-button__inner {
        border-radius: .4rem 0 0 .4rem;
    }

    .family /deep/ .el-radio-button__inner {
        border-radius: 0 .4rem .4rem 0;
    }

    .echartsBox {
        width: 100%;
        padding: .2rem;
        background-color: #f4f4f4;

        .status {
            padding: .2rem .3rem;
            font-weight: 700;
            font-size: .2rem;
        }

        .pieChart {
            width: 100%;
            height: 5rem;
            background-color: #fff;

            .left,
            .right {
                float: left;
                width: 50%;

                .leftBox,
                .rightBox {
                    width: 4rem;
                    height: 4rem;
                    margin: 0 auto;
                }
            }
        }

        .lineChart {
            width: 100%;
            height: 5rem;
            margin-top: .2rem;
            background-color: #f4f4f4;
            overflow: hidden;

            .lineChartL {
                height: 100%;
                /*width: 65%;*/
                background-color: #fff;
                margin-right: 5.5rem;
            }

            .lineChartR {
                float: right;
                width: 5.4rem;
                height: 100%;
                background-color: #fff;

                .left,
                .right {
                    float: left;
                    width: 50%;

                    .leftBox,
                    .rightBox {
                        width: 5.8rem;
                        height: 4rem;
                        margin-left: .3rem;
                    }
                }

                ul {
                    margin-top: .8rem;

                    li {
                        float: left;
                        width: 50%;
                        padding: .02rem;
                        margin-top: .1rem;
                        text-align: center;

                        .count {
                            font-size: .12rem;
                            color: #999;
                        }

                        div {
                            &:first-child {
                                font-weight: 700;
                                font-size: .2rem;
                            }
                        }

                        .enter {
                            color: #0d0;
                        }

                        .goOut {
                            color: #d00;
                        }
                    }
                }

                .button {
                    text-align: center;

                    .el-radio-group {
                        margin: .5rem auto;
                    }
                }
            }
        }

        .tableBox {
            width: 100%;
            padding-bottom: .2rem;
            margin-top: .2rem;
            background-color: #fff;

            .table-box {
                padding: 0 .2rem;
            }
        }
    }
</style>
